<template>
  
<div id='index-page'>
  <!-- Header Section -->
  <section class="banner" role="banner"> 
    <!-- Navigation Section -->
    <HeaderComponents></HeaderComponents>

    <!-- Navigation Section --> 
    <!-- Banner Section -->
    <div class="container">
      <div class="col-md-7 banner-inner-wrapper">
        <div class="banner-text">
          <!--           
            <h1>wanmoon</h1>
            <p>这里是一个大大的banner</p>
            <a href="#" class="btn">Find out more</a> 
          -->
        </div>
        <!-- banner text --> 
      </div>
    </div>
    <!-- Banner Section --> 
  </section>
  <!-- Header Section --> 
  <!-- Intro Section -->
  <section id="introduction" class="section introduction">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-sm-3">
          <div class="intro-content">
            <ul>
              <li>
                <div>
                  文章1
                </div>
              </li>
              <li>
                <div>
                  文章2
                </div>
              </li>
              <li>
                <div>
                  文章3
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Intro Section --> 

  <!-- work section -->
  <section id="works" class="works section no-padding">
    <div class="container-fluid">
      <div class="row no-gutter">
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-1.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-2.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-3.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-4.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-5.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-6.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-7.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-8.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-9.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-10.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> 
          <a href="javascript:void();" class="work-box"> 
          <img src="../assets/images/work-11.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
        <div class="col-lg-2 col-md-4 col-sm-4 work"> <a href="javascript:void(0);" class="work-box"> <img src="../assets/images/work-12.jpg" alt="">
          <div class="overlay">
            <div class="overlay-caption">
              <p><i class="fa fa-search-plus fa-2x"></i></p>
            </div>
          </div>
          <!-- overlay --> 
          </a> </div>
      </div>
    </div>
  </section>

  <FooterComponents></FooterComponents>

</div>

</template>

<script>

import Footer from '@/uicomponents/Footer'
import Header from '@/uicomponents/Header'

export default {
  name: 'index',
  components: {
    'FooterComponents': Footer,
    'HeaderComponents': Header
  }
}

</script>


<style>
  @import '../assets/css/bootstrap.min.css';
  @import '../assets/css/main.css';
</style>



